<script lang="ts" setup>
import { h, ref } from "vue";
import { Plus, Search } from "@element-plus/icons-vue";
import {
  ElButton,
  ElCard,
  ElDialog,
  ElInput,
  ElMessage,
  ElMessageBox,
  ElSpace,
} from "element-plus";

import { ProFormScope } from "@/modules/package/form";
import { ProTablePlus, ProTableScope } from "@/modules/package/table";
import DialogUser from "./components/DialogUser.vue";

import useRequest from "@/hooks/useRequest";
import useDialog from "@/hooks/useDialog";
import useTable from "@/hooks/useTable";
import useEnum from "@/hooks/useEnum";
import ApiAdmin from "@/api/admin";
import DialogPW from "./components/DialogPW.vue";
import regMenu from "@/utils/reg";

// import DialogPW from "./components/DialogPW.vue";

const EnumRole = useEnum("EnumRoles");

const tableColumns = [
  { label: "管理员", prop: "nickname", minWidth: 100 },
  {
    label: "角色",
    prop: "role",
    minWidth: 140,
    render: (row: any) => EnumRole.map[row.role]?.["label"],
  },
  { label: "手机号", prop: "mobile", minWidth: 130 },
  { label: "创建时间", prop: "create_time", minWidth: 150 },
  { label: "操作", slot: "operate", minWidth: 170 },
];

const formItems = [
  {
    children: {
      field: "mobile",
      type: h(ElInput, { suffixIcon: Search }, { prepend: () => "手机号" }),
      placeholder: "请输入搜索内容",
    },
  },
];

const {
  list,
  isFetching,
  pagination,
  search,
  submit,
  reset,
  refresh,
  bindNodeForPlus,
} = useTable(ApiAdmin.getAdminUserList, {
  foramtFetchParams(params) {
    const { type, value, ...rest } = params;
    if (value) Reflect.set(rest, type, value);
    return rest;
  },

  defaultSearch: {
    type: "nickname",
    value: "",
  },
});

// 删除
const {
  run,
  onFetchResponse: deleteResponse,
  onFetchFinally: deleteFinally,
} = useRequest(ApiAdmin.deleteAdminUser, { immediate: false });

deleteResponse(() => {
  ElMessage.success("操作成功！");
  refresh();
});

deleteFinally(() => {
  deleting.value = undefined;
});

const deleting = ref();
const handleDelete = async (row: any) => {
  await ElMessageBox.confirm(
    "删除后，该账号不再存在，请谨慎操作！",
    "确定要执行本次操作吗？",
    { type: "warning" }
  );
  run({ id: row.id });
  deleting.value = row;
};

const [visible, { source, open }] = useDialog();

</script>
<template>
  <ElCard>
    <ProTablePlus
      concise
      footer-fixed
      :col="{
        xs: 24,
        sm: 12,
        md: 8,
        lg: 6,
      }"
      :ref="bindNodeForPlus"
      :list="list"
      :search="search"
      :loading="isFetching"
      :columns="tableColumns"
      :form-items="formItems"
      :pagination="pagination"
    >
      <template #table-form>
        <ProFormScope>
          <template #form-footer>
            <ElButton @click="reset">重置</ElButton>
            <ElButton type="primary" plain @click="submit">查询</ElButton>
            <ElButton type="primary" :icon="Plus" @click="open()"
              >新增
            </ElButton>
          </template>
        </ProFormScope>
      </template>

      <ProTableScope>
        <template #operate="{ row }">
          <ElSpace>
            <ElButton plain type="primary" @click="open(row)">编辑 </ElButton>
<!-- 
            <ElButton
              class="cursor-pointer"
              size="small"
              type="warning"
              @click="updaterPass(row)"
              >修改密码
            </ElButton> -->

            <ElButton
              v-if="row.id != 1"
              plain
              type="danger"
              @click="handleDelete(row)"
            >
              删除{{ deleting == row ? "中..." : "" }}
            </ElButton>
          </ElSpace>
        </template>
      </ProTableScope>
    </ProTablePlus>
  </ElCard>

  <ElDialog
    v-model="visible"
    :title="(source?.id ? '编辑' : '新增') + '管理员'"
    destroy-on-close
    width="500"
  >
    <DialogUser
      :source="source"
      @success="
        refresh();
        visible = false;
      "
    />
  </ElDialog>

  <!-- <ElDialog v-model="visiblePw" title="修改密码" destroy-on-close width="500">
    <DialogPW @source="sourcePW" />
  </ElDialog> -->
</template>
